“React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration.”

很喜歡這段話，前端有趣的點對我正是如此：在設計和技術間取得平衡。可以讓你寫的東西和使用者互動，串各種即時資料或功能，還美美的。

Takeaway

• 原生DOM是命令式UI，React是聲明式UI
• React將組件視為狀態機
• 官方推薦在React重現UI的五步驟：列出視圖→觸發原因→寫好State→刪掉多餘→事件處理
• Living Style Guide：列出各種可能視圖，就像設計系統。例如按鈕可能就有normal, hover, active, focus, disabled等狀態
• Reducer可以合併多個State變數，減少多餘的。後續會學到
• 切換布林時不是用setState(true)，不然就會一直固定在true；而是要用setState(!state)才對

又是一次自己寫得開心，結果發現把img當成按鈕的挑戰一，限定不能再按一次圖片切回去，也就是說不能用三元運算，還要阻止跨父子影響的事件冒泡。

// 我原本寫的
import {useState} from 'react';

export default function Picture() {
  const [state, setState] = useState(false)

  function click() {
    setState(!state)
  }
  
  return (
    <div onClick={click} className={state ? "background background--active" : "background picture--active"}>
      <img
        className="picture"
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />
    </div>
  );
}

// 正解
import { useState } from 'react';

export default function Picture() {
  const [isActive, setIsActive] = useState(false);

  let backgroundClassName = 'background';
  let pictureClassName = 'picture';
  if (isActive) {
    pictureClassName += ' picture--active';
  } else {
    backgroundClassName += ' background--active';
  }

  return (
    <div
      className={backgroundClassName}
      onClick={() => setIsActive(false)}
    >
      <img
        onClick={e => {
          e.stopPropagation();
          setIsActive(true);
        }}
        className={pictureClassName}
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />
    </div>
  );
}

難度再升級的則是Edit mode和Save mode的轉換。列出視圖（兩種）和觸發原因（點擊）都不難，寫好State的部分則有「姓氏」、「名字」和「編輯中？」這三種會變化的部分。

這裡要特別小心，Form標籤也會因提不提交而改變！如果沒有透過onSubmit附加State的話，即使視圖成功切換了，畫面依然會自動重渲染。而Input自帶一個名為onChange的DOM事件，可以設定輸入的值正在改變時要做什麼。

再多筆記一點新手寫code可能會踩的小陷阱：像Takeaway裡也有寫到，但還是要不厭其煩提醒自己的，記得setter裡是寫「!state」。好容易因為前面設定false，直覺就在要切換時填上true。另外還有雖然無傷大雅，但符合coding style還是比較好的，事件處理函數通常以handle開頭的命名慣例。